<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>日志查询</title>
    <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
</head>
<body style="background-color: black">
<button onclick="openSocket()">开启日志</button>
<button onclick="closeSocket()">关闭日志</button>
<div style="color: white">
    <h2>当前日志总条数：<span id="logtotal"></span></h2>
</div>
<div id="log-container" style="height: 80%; color: white; padding: 10px;">
    <div></div>
</div>

</body>
<script>
    var stompClient = null;
    $(document).ready(function () {
        openSocket();
    });
    function openSocket() {
        if (stompClient == null) {
            var socket = new SockJS('http://192.168.4.76:9094/ws?token=kl');
            stompClient = Stomp.over(socket);
            stompClient.connect({token: "kl"}, function (frame) {
                stompClient.subscribe('/topic/pullLogger', function (event) {
                    var content = JSON.parse(event.body);
                    $("#log-container div").append(content.timestamp + " " + content.level + " --- [" + content.threadName + "] " + content.className + "   :" + content.body).append("<br/>");
                    $("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
                }, {
                    token: "kltoen"
                });

                stompClient.subscribe('/topic/logtotal', function (event) {
                    var total = JSON.parse(event.body);
                    $("#logtotal").html(total);
                }, {
                    token: "kltoen"
                });

            });
        }
    }
    function closeSocket() {
        if (stompClient != null) {
            stompClient.disconnect();
            stompClient = null;
        }
    }
</script>
</html>
